<template>
  <div class="strategyTravels">
    <div class="top">
      <div class="title">攻略游记</div>
      <div class="showAll" @click="more">查看更多></div>
    </div>
    <div class="list">
      <div
        class="item"
        v-for="(item, index) in homeArticleList.slice(0, 8)"
        :key="index"
        @click="goDetail(item.id)"
      >
        <el-image :src="item.tourTitleImgStr" />
        <div class="text">{{ item.tourTitle ? item.tourTitle : "" }}</div>
        <div class="bottom">
          <el-avatar
            :size="30"
            :src="require('../../assets/imgs/avatar.png')"
          ></el-avatar>
          <div class="name">{{ item.publisherName }}</div>
          <div class="right">
            <div>
              <i class="el-icon-chat-dot-square"></i>{{ item.tourComments }}
            </div>
            <div><i class="el-icon-star-off"></i>{{ item.tourCollect }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: ["homeArticleList"],
  data() {
    return {};
  },
  watch: {},
  computed: {},
  methods: {
    goDetail(id) {
      this.$router.push({
        path: "/counsel/travel",
        query: {
          tourId: id,
        },
      });
    },
    more() {
      this.$router.push({
        path: "/counsel",
      });
    },
  },
  created() {},
  mounted() {},
};
</script>
<style lang="less" scoped>
@import "./index.less";
</style>
